<template>
    <view class="container">
        <navView navTitle="薪资详情" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>

        <!-- 员工信息模块 -->
        <view class="info-box">
            <view class="info-item">
                <text class="label">员工</text>
                <text class="value">{{ salary.staff.name || '--' }}</text>
            </view>
            <view class="info-item">
                <text class="label">薪资月份</text>
                <text class="value">{{ (salary.month && salary.month.split('-')[0] + '年' + salary.month.split('-')[1] +
                    '月') || '--' }}</text>
            </view>
        </view>

        <!-- 工资明细模块 -->
        <view class="chengbox">
            <view class="title">
                <view class="left">
                    <view class="tiao"></view>
                    <view class="name">工资明细</view>
                </view>
            </view>

            <view class="grid">
                <!-- 基础工资 -->
                <view class="card">
                    <view class="card-title">基础工资</view>
                    <view class="card-content">
                        <text class="amount">¥{{ salary.staff.salary || 0.00 }}</text>
                        <view class="detail">应出勤天数 {{ salary.attendance_days || 0}} 天</view>
                        <view class="detail">实际出勤天数 {{ salary.actual_attendance || 0}} 天</view>
                        <view class="detail">积分顶扣天数 {{ salary.deduct_leave_days || 0}} 天</view>
                        <view class="detail">迟到天数 {{ salary.late_count || 0}} 天</view>
                        <view class="detail">本次使用积分数量 {{ salary.used_points || 0}} </view>
                    </view>
                </view>

                <!-- 绩效提成 -->
                <view class="card accent">
                    <view class="card-title">绩效提成</view>
                    <view class="card-content">
                        <text class="amount">¥{{ salary.performance_pay || 0.00 }}</text>
                        <view class="detail">提成比例 {{ (salary.commission_rate / 100) || 0 }}%</view>
                        <view class="detail">业绩提成 {{ salary.achievement || 0 }}</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 其他收入模块 -->
        <view class="chengbox">
            <view class="title">
                <view class="left">
                    <view class="tiao"></view>
                    <view class="name">其他收入</view>
                </view>
            </view>

            <view class="list">
                <view class="list-item">
                    <text>学历补助</text>
                    <text class="value">¥{{ salary.education_allowance || 0.00 }}</text>
                </view>
            </view>
        </view>

        <!-- 扣除金额模块 -->
        <view class="chengbox warning">
            <view class="title">
                <view class="left">
                    <view class="tiao"></view>
                    <view class="name">扣除金额</view>
                </view>
            </view>

            <view class="list">
                <view class="list-item">
                    <text>迟到扣款</text>
                    <text class="value">-¥{{ salary.leaveamount || 0.00 }}</text>
                </view>
                <view class="list-item">
                    <text>其他扣款</text>
                    <text class="value">-¥{{ salary.otheramount || 0.00 }}</text>
                </view>
                <view class="list-item">
                    <text>基金扣款</text>
                    <text class="value">-¥{{ salary.fund_deduction || 0.00 }}</text>
                </view>
                <view class="list-item">
                    <text>扣税金额</text>
                    <text class="value">-¥{{ salary.tax_amount || 0.00 }}</text>
                </view>
                <view class="list-item total">
                    <text>实发金额</text>
                    <text class="value">¥{{ (salary.amount || 0).toFixed(2) || 0.00 }}</text>
                </view>
            </view>
        </view>

        <!-- 新增回款列表模块 -->
        <view class="chengbox">
            <view class="title">
                <view class="left">
                    <view class="tiao"></view>
                    <view class="name">回款列表</view>
                </view>
            </view>
            
            <view class="list">
                <view class="list-item" v-for="(item, index) in salary.receivable" :key="index">
                    <view class="contract-info">
                        <text class="contract-name">{{ item.remake }}</text>
                        <text class="contract-num">回款编号：{{ item.number }}</text>
                    </view>
                    <view class="value-box">
                        <text class="money">¥{{ item.money }}</text>
                        <text class="contract-money">回款时间：¥{{ item.return_time }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            salary: {}
        }
    },
    onLoad(options) {
        this.getSalaryDetail(options.id);
    },
    methods: {
        getSalaryDetail(id) {
            this.$request('/addons/qingdong/salary/getUserSalayInfo', 'GET', { id }).then(res => {
                this.salary = {
                    ...res.data.salary,
                    receivable: res.data.receivable || []
                };
            });
        }
    }
}
</script>

<style lang="scss">
.container {
    padding: 20rpx;
}

.info-box {
    background: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin: 20rpx 0;
    box-shadow: 0 6rpx 16rpx rgba(114, 110, 255, 0.11);
    
    .info-item {
        display: flex;
        justify-content: space-between;
        margin: 20rpx 0;
        
        .label {
            color: #666;
            font-size: 28rpx;
        }
        .value {
            color: #333;
            font-weight: bold;
        }
    }
}

.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20rpx;
    padding: 20rpx;
    
    .card {
        background: #f8f9fa;
        border-radius: 12rpx;
        padding: 30rpx;
        
        &.accent {
            background: #e6f7ff;
        }
        
        .card-title {
            color: #666;
            font-size: 26rpx;
            margin-bottom: 15rpx;
        }
        
        .amount {
            color: #008efe;
            font-size: 36rpx;
            font-weight: bold;
        }
        
        .detail {
            color: #999;
            font-size: 24rpx;
            margin-top: 10rpx;
        }
    }
}

.list {
    padding: 20rpx;
    
    .list-item {
        display: flex;
        justify-content: space-between;
        padding: 25rpx 0;
        border-bottom: 1rpx solid #eee;
        
        .value {
            color: #008efe;
            font-weight: bold;
        }
        
        &.total {
            background: #f8f9fa;
            margin-top: 20rpx;
            padding: 30rpx;
            border-radius: 12rpx;
            
            .value {
                color: #ff4d4f;
                font-size: 32rpx;
            }
        }
    }
}

.warning {
    .list-item .value {
        color: #ff4d4f;
    }
}

/* 共用样式继承自原detail.vue */
.chengbox {
    background: #fff;
    border-radius: 16rpx;
    margin: 30rpx 0;
    box-shadow: 0 1rpx 6rpx rgba(97, 97, 97, 0.25);
    
    .title {
        padding: 30rpx;
        border-bottom: 1rpx solid #eee;
        
        .left {
            display: flex;
            align-items: center;
            
            .tiao {
                width: 8rpx;
                height: 30rpx;
                background: #008efe;
                margin-right: 15rpx;
            }
            
            .name {
                font-size: 30rpx;
                color: #333;
                font-weight: bold;
            }
        }
    }
}
.list-item {
    .contract-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        
        .contract-name {
            font-size: 28rpx;
            color: #333;
        }
        
        .contract-num {
            font-size: 24rpx;
            color: #999;
        }
    }
    
    .value-box {
        text-align: right;
        
        .money {
            color: #008efe;
            font-size: 32rpx;
            font-weight: bold;
        }
        
        .contract-money {
            display: block;
            font-size: 24rpx;
            color: #999;
        }
    }
}
</style>
